<template>
    <div class="module-name pt10 pl10 pr10 ">
        <avue-crud :defaults.sync="defaults"
                   ref="crud" v-model="dialogForm" :table-loading="loading" :data="data"
                   :option="option"
                   :page.sync="page"
                   @on-load="onLoad"
                   @search-change="handleSearchChange"
                   @row-save="handleSave"
                   @row-update="handleUpdate"
                   @row-del="handleDel"
                   :search.sync="searchForm"
                   @tree-load="treeLoad"
        >
            <template slot="menu" slot-scope="{row,size,type}">
                <el-button v-if="row.parentId===-1" :size="size" :type="type" @click="handleAdd(row,'isSon')">新增子级
                </el-button>
            </template>
            <!--row插槽-->
            <template slot-scope="{row}" slot="code">
                <el-tag v-if="row.code">{{ row.code }}</el-tag>
                <span v-else></span>
            </template>

            <template slot-scope="{row}" slot="relation">
                <el-tag v-if="row.parentId===-1" type="warning">父级</el-tag>
                <el-tag v-else type="success">子级</el-tag>
            </template>

            <template slot-scope="{row}" slot="dictValue">
                <el-tag v-if="row.dictValue" type="info">{{ row.dictValue }}</el-tag>
                <span v-else></span>
            </template>

            <template slot-scope="{row}" slot="dictKey">
                <span style="color:#FEC171;font-weight: bold">{{ row.dictKey }}</span>
            </template>


            <!--自定义操作栏-->
            <!-- <template slot-scope="{type,size}" slot="menu">-->
            <!--                <el-button type="text" size="mini">业务功能</el-button>-->
            <!--            </template>-->

            <!-- 自定义菜单-->
            <template slot-scope="scope" slot="menuLeft">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增父级</el-button>
            </template>
        </avue-crud>


    </div>
</template>
<script>
import page from "@/mixins/page";

export default {
    name: "module-name",
    mixins: [page],
    data() {
        return {
            defaults: {},
            //分页参数
            searchForm: {
                parentId: -1
            },
            urls: {
                0: 'dict',
                1: 'findPage',
            },

            data: [],
            option: {
                ...window.avueCrud,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: true,
                lazy: true,
                // 列设置
                // clearExclude: ["schoolName"], //搜索不清空
                column: [
                    {
                        label: 'id',
                        prop: 'id',
                        width: 60,
                        // hide: true,
                        search: true,
                        display: false,
                    },
                    {
                        label: '字典类型',
                        prop: 'name',
                        search: true,
                        width: 160,
                        placeholder: '子集  为空 （例：中文名称）'
                    },
                    {
                        label: '字典标识(关联查询)',
                        prop: 'code',
                        width: 150,
                        search: true,
                        searchLabel: '字典标识',
                        placeholder: '子集  为空 （例：panCodeTime）'
                    },

                    {
                        label: '父id',
                        prop: 'parentId',
                        width: 60,
                        span: 24,
                    },
                    {
                        label: '关系',
                        prop: 'relation',
                        width: 60,
                        display: false,
                    },
                    {
                        label: 'dictValue',
                        prop: 'dictValue',
                        span: 24,
                        placeholder: '（例：禁用）'
                    },
                    {
                        label: 'dictKey',
                        prop: 'dictKey',
                        span: 24,
                        placeholder: '（例：1）',
                    },
                    {
                        label: '(备注)remark',
                        prop: 'remark',
                    },
                    {
                        label: '排序',
                        prop: 'sort',
                        width: 50
                    },
                    {
                        label: '创建时间',
                        prop: 'createAt',
                        display: false,
                    },
                    {
                        label: '修改时间',
                        prop: 'updateAt',
                        display: false,
                    },

                ],
            },
            dialogForm: {},
        };
    },
    methods: {
        /**
         * 获取数据完成回调
         * @param resData 接口返回的data
         * @returns {Promise<void>}
         */
        async dataCallBack(resData) {
            this.data = resData.records.map(v => ({
                ...v,
                hasChildren: true
            }))
        },
        handleAdd(row, isSon) {

            // this.$set(this.defaults.code, 'addDisplay', !isSon)
            this.$set(this.defaults.name, 'addDisplay', !isSon)

            this.$set(this.defaults.dictKey, 'addDisplay', !!isSon)
            this.$set(this.defaults.dictValue, 'addDisplay', !!isSon)
            this.$set(this.defaults.parentId, 'addDisplay', !!isSon)

            if (isSon) {
                this.dialogForm.parentId = row.id
                this.dialogForm.code = row.code
            }
            this.$refs.crud.rowAdd()
        },
        async treeLoad(tree, treeNode, resolve) {
            const {data} = await this.$api.dict.findAll({
                parentId: tree.id
            })
            resolve(data)
        },
        async handleUpdate(row, index, done) {
            const {code} = await this.$api.dict.update({
                id: row.id,
                code: row.code,
                name: row.name,
                dictKey: row.dictKey,
                dictValue: row.dictValue,
                parentId: row.parentId,
                sort: row.sort,
                remark: row.remark,
            })
            if (code === 200) {
                // this.getData(this.searchForm)
                this.$notify({
                    message: '更改成功',
                    type: 'success',
                    duration: 2000,
                })
            }
            done(row)
        },

        async handleSave(row, done) {
            const {code, msg} = await this.$api.dict.create({
                code: row.code,
                name: row.name,
                dictKey: row.dictKey,
                dictValue: row.dictValue,
                parentId: row.parentId,
                sort: row.sort,
                remark: row.remark,
            })
            if (code === 200) {
                this.getData(this.searchForm)
                this.$notify({
                    message: msg || '创建成功',
                    type: 'success',
                    duration: 2000,
                })
            }
            done()
        },

        async handleDel(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const {code} = await this.$api.user.deleteUser({
                        id: row.id,
                    })
                    if (code === 200) {
                        this.getData(this.searchForm)
                        this.$notify({
                            message: '删除成功',
                            type: 'success',
                            duration: 2000,
                        })
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },

    }
};
</script>

<style lang="scss" scoped>
.module-name {
}
</style>
